import { useEffect } from "react"
import { gsap } from "gsap";

import './Card.css'

const info = `昨日
是2024年春运第一天
雨雪天气较少
仅在云南、贵州、广西等地
出现小雨
本周末
预计27日至28日
西南地区仍多阴雨雪天气
其他地区以晴或多云天气为主

预计今天
内蒙古东北部、黑龙江西北部
西藏东部、川西高原、贵州中西部
云南东北部等地部分地区
有小雪或雨夹雪
贵州西部局地有冻雨
重庆南部、贵州东部、云南大部
湖南南部、华南中西部等地部分地区
有小到中雨`

const Card = () => {
  useEffect(() => {
    const feTur = document.querySelector('feTurbulence')
    const tl = new gsap.timeline({
      paused:true,
      onUpdate(){
        feTur.setAttribute('baseFrequency', `0 ${val.freq}`)
      }
    })

    const val = {
      freq: 0.00001
    }

    tl.to(val,{
      freq: 0.4,
      duration: 0.1,
    })
    tl.to(val,{
      freq: 0.00001,
      duration: 0.1,
    })

    btn.onmouseenter = function(){
      tl.restart()
    }


    const throttleA = function(fn,delay){
      // 记录起始时间
      let start = 0

      return function() {
        // 注意此处this指向 函数调用者
        let context = this
        let args = arguments
        let now = new Date().getTime()

        if (now - start > delay){
          // fn需要绑定上层函数this  否则默认为window调用
          fn.apply(context,args)
          // 重置起始时间
          start = new Date()
        }
      }
    }
    let card = document.getElementById('card')
    let center = {
      x: card.offsetLeft+card.offsetWidth/2,
      y: card.offsetTop + card.offsetHeight/2
    }

    document.onmousemove = throttleA(function(e){
      let dataX = center.x - e.clientX
      let dataY = center.y - e.clientY
      let x = 0
      let y = 0
      if (dataX >= 0) {
        x = (dataX/center.x).toFixed(2)
      } else {
        x = (dataX/(document.documentElement.clientWidth - center.x)).toFixed(2)
      }

      if (dataY >= 0) {
        y = (dataY/center.y).toFixed(2)
      } else {
        y = (dataY/(document.documentElement.clientHeight - center.y)).toFixed(2)
      }
      card.style.setProperty('--y',-x)
      card.style.setProperty('--x',y)
      card.style.getPropertyValue('--y')
      // console.log(x);
    },50)
    // card.onmouseleave = function(){
    //   // card.onmousemove = null
    //   card.style.setProperty('--y',0)
    //   card.style.setProperty('--x',0)
    // }

    return () => {
      document.onmousemove = null
    }
  },[])
  return <>
    <svg style={{display:'none'}}>
      <filter id="noise" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" colorInterpolationFilters="linearRGB">
        <feTurbulence type="turbulence" baseFrequency="0 0" numOctaves="2" seed="3" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" result="displacementMap2"/>
      </filter>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" colorInterpolationFilters="linearRGB">
        <feDropShadow stdDeviation="5 5" in="SourceGraphic" dx="10" dy="10" floodColor="#1F3646" floodOpacity="1" x="0%" y="0%" width="100%" height="100%" result="dropShadow"/>
      </filter>
    </svg>
    <div id="card" className="card">
      <div className="content">
        {info}
      </div>
      <div id="row" className="row one" >row1</div>
      <div id="row" className="row two" >row2</div>
      <div id="btn" className="row three" >
        <div className="play"></div>
        play
      </div>
    </div>  
  </>
}

export default Card